<template>
  <div class="container">
    <el-card>
      <!-- 头部区域 -->
      <div class="btn">
        <span class="shuomiing">说明：目前支持学科和关键字条件筛选</span>
        <el-button
          @click="$router.push('new')"
          style="float: right"
          size="mini"
          type="success"
          icon="el-icon-edit"
          >新增试题</el-button
        >
      </div>
      <!-- 表单栏区域 -->
      <el-form label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                @change="changeSubject"
                placeholder="请选择"
                v-model="requestParams.subjectID"
              >
                <el-option
                  v-for="item in subjectOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select placeholder="请选择" v-model="requestParams.catalogID">
                <el-option
                  v-for="item in directoryOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select placeholder="请选择" v-model="requestParams.tags">
                <el-option
                  v-for="item in tagOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键词">
              <el-input
                placeholder="根据题干搜索"
                v-model="requestParams.keyword"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select
                placeholder="请选择"
                v-model="requestParams.questionType"
              >
                <el-option
                  v-for="item in questionTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select
                placeholder="请选择"
                v-model="requestParams.difficulty"
              >
                <el-option
                  v-for="item in diffOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select placeholder="请选择" v-model="requestParams.direction">
                <el-option
                  v-for="item in directionOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="录入人
              "
            >
              <el-select placeholder="请选择" v-model="requestParams.creatorID">
                <el-option
                  v-for="item in userOptions"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="题目备注
              "
            >
              <el-input v-model="requestParams.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="企业简称
              "
            >
              <el-input v-model="requestParams.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select
                placeholder="请选择"
                style="width: 50%"
                v-model="requestParams.province"
              >
                <el-option
                  v-for="item in cityOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <el-select
                placeholder="请选择"
                style="width: 50%"
                v-model="requestParams.city"
              >
                <el-option
                  v-for="item in areaOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="text-align: right">
              <el-button size="mini" @click="clear">清除</el-button>
              <el-button type="primary" size="mini" @click="search"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 状态切换 -->
      <el-tabs
        type="card"
        @tab-click="tabClick"
        v-model="requestParams.chkState"
      >
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="待审核" name="0"></el-tab-pane>
        <el-tab-pane label="已审核" name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
      </el-tabs>
      <!-- 数据显示 -->
      <el-alert :title="`数据一共 ${total} 条`" type="info" show-icon>
      </el-alert>
      <!-- 表格区域 -->
      <el-table :data="questions">
        <el-table-column prop="number" label="试题编号" width="150">
        </el-table-column>
        <el-table-column label="学科" prop="subject" width="120">
        </el-table-column>
        <el-table-column label="目录" prop="catalog" width="120">
        </el-table-column>
        <el-table-column label="题型" width="120" prop="questionType">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType == 1">单选</span>
            <span v-else-if="scope.row.questionType == 2">多选</span>
            <span v-else>简单</span>
          </template>
        </el-table-column>
        <el-table-column label="题干" width="250">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="120">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column label="难度" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType == 1">简单</span>
            <span v-else-if="scope.row.questionType == 2">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column label="录入人" prop="creator" width="120">
        </el-table-column>
        <el-table-column label="审核状态" width="120">
          <template slot-scope="scope">
            {{ scope.row.chkState | state_chk }}
          </template>
        </el-table-column>
        <el-table-column label="审核意见" prop="chkRemarks" width="120">
        </el-table-column>
        <el-table-column label="审核人" prop="chkUser" width="120">
        </el-table-column>
        <el-table-column label="发布状态" width="120">
          <template slot-scope="scope">
            {{ scope.row | state_pub }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="yulan(scope.row)">
              预览
            </el-button>
            <el-button
              type="text"
              @click="audit(scope.row)"
              :disabled="scope.row.chkState !== 0"
            >
              审核
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="$router.push(`new?id=${scope.row.id}`)"
            >
              修改
            </el-button>
            <el-button type="text" size="small" @click="shelves(scope.row)">
              {{ scope.row.publishState === 1 ? "下架" : "上架" }}
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="delQuestion(scope.row)"
              :disabled="scope.row.publishState === 1"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          style="text-align: right"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="1"
          layout="prev, pager, next, sizes, jumper"
          :total="total"
        >
        </el-pagination>
        <!-- 预览 -->
        <questions-preview
          ref="questionPreview"
          :data="questionInfo"
        ></questions-preview>
        <!-- 审核 -->
        <questions-check
          ref="questionCheck"
          :data="questionInfo"
          @updateList="getQuestionList()"
        >
        </questions-check>
      </div>
    </el-card>
  </div>
</template>

<script>
// 学科简单列表
import { simple as subjectList } from "@/api/hmmm/subjects";
import { simple as userList } from "@/api/base/users";
// 目录简单列表
import { simple as directoryList } from "@/api/hmmm/directorys";
//题型、难度、方向
import { difficulty, questionType, direction } from "@/api/hmmm/constants";
// 标签简单列表
import { simple as tagList } from "@/api/hmmm/tags";
// 城市、地区
import { provinces as province, citys as city } from "@/api/hmmm/citys";
import {
  //题库列表
  choice as questionList,
  //   删除题库
  remove as questionDel,
  //   上下架
  choicePublish,
} from "@/api/hmmm/questions";
import QuestionsPreview from "../components/questions-preview";
import QuestionsCheck from "../components/questions-check";
export default {
  components: {
    QuestionsCheck,
    QuestionsPreview,
  },
  filters: {
    state_chk(val) {
      if (val === 0) return "待审核";
      if (val === 1) return "已审核";
      if (val === 2) return "已拒绝";
    },
    state_pub(row) {
      if (row.publishState === 1 && row.chkState === 1) {
        return "已发布";
      }
      if (row.publishState === 0 && row.chkState === 1) {
        return "已下架";
      }
      return "待发布";
    },
  },
  data() {
    return {
      total: 0,
      difficulty,
      questionInfo: {},
      questionType,
      province,
      //精选列表
      questions: [],
      // 学科选项
      subjectOptions: [],
      // 二级目录
      directoryOptions: [],
      // 标签
      tagOptions: [],
      // 试题类型
      questionTypeOptions: questionType,
      // 难度选项
      diffOptions: difficulty,
      // 方向选项
      directionOptions: direction,
      // 录入人
      userOptions: [],
      // 城市
      cityOptions: province,
      // 地区
      areaOptions: city,
      requestParams: {
        // 学科
        subjectID: null,
        // 当前页数
        page: 1,
        // 页尺寸
        pagesize: 5,
        chkState: "all",
        // 标签名称
        tags: null,
        // 关键字
        keyword: null,
        // 试题类型
        questionType: null,
        // 难度
        difficulty: null,
        // 方向
        direction: null,
        // 录入人
        creatorID: null,
        // 题目备注
        remarks: null,
        // 企业简称
        shortName: null,
        // 企业所在地省份
        province: null,
        // 企业所在城市
        city: null,
        // 二级目录
        catalogID: null,
      },
    };
  },
  async created() {
    const { data: subjectArr } = await subjectList();
    this.subjectOptions = subjectArr;
    const { data: userArr } = await userList();
    this.getQuestionList();

    this.userOptions = userArr;
  },
  methods: {
    async changeSubject(subjectID) {
      this.requestParams.catalogID = null;
      this.requestParams.tags = null;
      if (subjectID) {
        //    获取目录
        const { data: directoryArr } = await directoryList({ subjectID });
        this.directionOptions = directoryArr;
        // 获取标签下拉选项
        const { data: tagArr } = await tagList({
          subjectID,
        });
        this.tagOptions = tagArr;
      } else {
        (this.directionOptions = []), (this.tagOptions = []);
      }
    },
    //切换tab栏
    tabClick() {
      this.requestParams.page = 1;
      this.getQuestionList();
    },
    //获取精选题库列表
    async getQuestionList() {
      const params = { ...this.requestParams };
      if (params.chkState === "all") params.chkState = null;
      const { data: questionsData } = await questionList(this.requestParams);
      this.questions = questionsData.items;
      this.total = questionsData.counts;
    },
    //清除
    clear() {
      for (const key in this.requestParams) {
        if (key !== "page" && key !== "pagesize")
          this.requestParams[key] = null;
      }
    },
    //搜索
    search() {
      this.requestParams.page = 1;
      this.getQuestionList();
    },
    //预览
    yulan(questionInfo) {
      this.questionInfo = questionInfo;
      this.$nextTick(() => {
        this.$refs.questionPreview.open();
      });
    },
    //审核
    audit(questionInfo) {
      this.questionInfo = questionInfo;
      this.$nextTick(() => {
        this.$refs.questionCheck.open();
      });
    },
    //上下架
    async shelves(question) {
      await this.$confirm(
        `你确定${question.publishState === 1 ? "下架" : "上架"}这道题吗？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      );
      question.publishState = question.publishState === 1 ? 0 : 1;
      await choicePublish(question);
      this.$message.success(
        `${question.publishState === 1 ? "上架" : "下架"}成功`
      );
      this.getQuestionList();
    },
    // 删除
    async delQuestion(question) {
      await this.$confirm("是否删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      await questionDel(question);
      this.$message.success("删除成功");
      this.getQuestionList();
    },
  },
};
</script>

<style scoped lang="less" scoped>
.container {
  padding: 10px;
}
.shuomiing {
  font-size: 12px;
  color: pink;
}
.btn {
  margin-bottom: 25px;
}
</style>
